<template>


    <el-button type="primary"  @click="handleAdd">
       新增比赛
      </el-button>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column label="赛事名称" prop="contestTitle" />
        <el-table-column label="直播源" prop="liveSource" />
        <el-table-column label="开始时间" prop="contestStartTime" />
        <el-table-column label="结束时间" prop="contestEndTime" />
        <el-table-column label="比赛人制" prop="contestNumber" />
        <el-table-column label="比赛地址" prop="contestAddress" />
        <el-table-column label="创建时间" prop="createTime" />
        <el-table-column align="right">
          <template #header>
        <el-input v-model="queryForm.query"  @input="initUserList" placeholder="请输入内容"></el-input>
          </template>
          <template #default="scope">
            <el-button size="small"  type="primary" @click="handleEdit(scope.$index, scope.row)">
              赛程创建
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="modifyContest(scope.row)" >
             编辑
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="deleteContest(scope.row.id)" >
             删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="queryForm.pageNum"
          v-model:page-size="queryForm.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :size="size"
    
          background layout="prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
    
        <el-dialog v-model="dialogFormVisible" title="新增比赛" width="500">
          <el-form :model="contestFrom" :rules="rules" ref="contestFromRef" label-width="auto" style="max-width: 600px">
   
        <el-form-item prop="contestTitle" label="赛事名称">
          <el-input v-model="contestFrom.contestTitle" placeholder="请输入赛事名称"></el-input>
        </el-form-item>
        <el-form-item prop="liveSource" label="直播源">
          <el-input v-model="contestFrom.liveSource" placeholder="请输入直播源"></el-input>
        </el-form-item>
        <el-form-item prop="contestStartTime" label="开始时间">
        <el-date-picker  
        v-model="contestFrom.contestStartTime"
        type="datetime"
         format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="选择开始时间"
        clearable/>
        </el-form-item>
        <el-form-item label="结束时间" prop="contestEndTime" >
                <el-date-picker  
            v-model="contestFrom.contestEndTime"
            type="datetime"
             format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择开始时间"
            clearable/>
          </el-form-item>
          <el-form-item label="比赛人制" prop="contestNumber" >
            <div style="margin: 20px 0" />
            <el-input v-model="contestFrom.contestNumber"  placeholder="请输入比赛人制"/>
          </el-form-item>

          <el-form-item label="比赛地址" prop="contestAddress" >
            <div style="margin: 20px 0" />
            <el-input v-model="contestFrom.contestAddress"  placeholder="请输入比赛地址"/>
          </el-form-item>
       
      </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="resetForm">取消</el-button>
            <el-button type="primary" @click=" submitForm()">
              提交
            </el-button>
          </div>
        </template>
      </el-dialog>
    

    <course ref="courseRef" />
    </template>
    
    <script  setup>
         import {ref,reactive} from 'vue';
         import request from '@/util/request';
         import { ElMessage,ElMessageBox } from 'element-plus'
         import course from '../../components/course.vue'
         const dialogFormVisible = ref(false)
         const tableData=ref([]);
         const total=ref(0);
         const queryForm=ref({
            query:"",
            pageNum:1,
            pageSize:10
         })
         const initUserList=async ()=>{
           const res= await request.post("/contest/list",queryForm.value)
           tableData.value=res.data.data.dataList;
           total.value=res.data.data.total;
         }
         initUserList();
         const handleSizeChange=(pageSize)=>{
            queryForm.value.pageNum=1;
            queryForm.value.pageSize=pageSize
            initUserList();
         }
         const handleCurrentChange=(pageNum)=>{
            queryForm.value.pageNum=pageNum;
             
            initUserList();
         }
         const contestFrom = reactive({
          id:'',
          contestAddress:'',
          contestNumber:'',
          contestEndTime:'',
          contestStartTime: '',
          contestTitle: '',
          liveSource:''
    })

    const validateEndTime=(rule, value, callback) =>{
      if (contestFrom.contestStartTime && value < contestFrom.contestStartTime) {
        callback(new Error('结束时间不能小于开始时间'));
      } else {
        callback();
      }
    }
    const rules = {
      contestTitle: [
        { required: true, message: '请输入比赛标题', trigger: 'blur' }
      ],
      contestStartTime: [
        { required: true, message: '请选择开始时间', trigger: 'blur' }
        
      ],
      contestEndTime: [
                { required: true, message: '请选择结束时间', trigger: 'blur' },
                { validator: validateEndTime, trigger: 'change' }
              
        ],
        contestNumber: [
                { required: true, message: '请输入比赛人制', trigger: 'blur' }
              
        ],
        liveSource: [
                { required: true, message: '直播源', trigger: 'blur' }
              
        ]
    };

    const modifyContest=(row)=>{
     let obj=  Object.assign({}, row)
         contestFrom.id=obj.id;
         contestFrom.contestAddress=obj.id;
         contestFrom.contestNumber=obj.contestNumber;
         contestFrom.contestEndTime=obj.contestEndTime;
         contestFrom.contestStartTime=obj.contestStartTime;
         contestFrom.contestTitle=obj.contestTitle;
         contestFrom.liveSource=obj.liveSource;
    dialogFormVisible.value = true
    }

    const deleteContest=(id)=>{
  ElMessageBox.confirm(
          '确认删除',
          'Warning',
          {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
          }
      ).then(() => {
          request.get("contest/"+id).then(res=>{
            if(res.data.code==200){
              initUserList()
              ElMessage.success("删除成功")
            }else{
              ElMessage.error(res.data.msg);
            }
          })
    })}
    const contestFromRef = ref(null);

     
    const submitForm = () => {
  
      contestFromRef.value.validate((valid) => {
        if (valid) {
          request.post("contest/saveOrUpdate",contestFrom).then(res=>{
           if(res.data.code==200){
            initUserList();
            resetForm();
            ElMessage.success("新增成功")
           }else{
            ElMessage.error(res.data.msg);
           }
          })
        } else {
          return false;
        }
      });
    };
    const courseRef = ref(null);
    const handleEdit=(index,row)=>{
     let obj=  Object.assign({}, row)
     courseRef.value.show(obj.id);

    }

    
    const handleAdd=()=>{
      dialogFormVisible.value = true
    }
    
    const resetForm = () => {
      contestFrom.id='';
         contestFrom.contestAddress='';
         contestFrom.contestNumber='';
         contestFrom.contestEndTime='';
         contestFrom.contestStartTime='';
         contestFrom.contestTitle='';
         contestFrom.liveSource='';
          dialogFormVisible.value = false
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>
    